<template>
  <!-- 后台管理模版模块父组件 -->
  <div class="slider-navbar">
    <!-- 主容器 - 左右布局 -->
    <div class="main-container">
      <!-- 左侧部分 - 模板列表（两列布局） -->
      <div class="left-section">
        <div class="top-content">
          <PublicNavBar
              :items="navbarListLeft"
              direction="horizontal"
              :horizontalWidth="horizontalWidthLeft"
              @handleItemClick="navbarClickLeft"
              :activeIndex="activeNavbarIndexLeft"
              :itemSpacingArray="[0, 40, 40, 40]"
            />
        </div>
        <!-- 左侧模板网格布局 - 两列 -->
        <div class="template-grid">
          <el-row>
            <el-col
              :span="12"
              v-for="(template, index) in defaultTemplates"
              :key="template.id"
            >
              <div class="template-card" :class="{ left: index % 2 === 0 }">
                <div class="template-preview">
                  <img
                    src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png"
                    alt="智慧园区"
                    class="template-image"
                  />
                  <div class="template-actions-status">
                    <div class="status-btn">使用中</div>
                  </div>
                </div>
                <div class="template-info">
                  <h3 class="template-name">智慧园区</h3>
                  <div class="flex-between">
                    <span class="template-category">工业制造</span>
                    <div>
                      <span class="primary-color">¥</span>
                      <span class="template-price"> 299</span>
                    </div>
                  </div>
                </div>
                <!-- 悬停时显示的按钮 -->
                <div class="template-actions">
                  <button class="action-btn default-btn">购买</button>
                  <button class="action-btn restore-btn">扫码预览</button>
                </div>
                <!-- 背景遮罩 -->
                <div class="template-overlay"></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 右侧部分 - 保持原样 -->
      <div class="right-section">
        <!-- 预览区域 -->
        <div class="preview-container">
          <!-- 顶部切换标签 -->
          <div class="preview-tabs">
            <PublicNavBar
              :items="navbarListRight"
              direction="horizontal"
              :horizontalWidth="horizontalWidthRight"
              @handleItemClick="navbarClickRight"
              :activeIndex="activeNavbarIndexRight"
              :itemSpacingArray="[0, 40, 40, 40]"
            />
          </div>
         <!-- 使用子组件显示手机预览图 -->
         <PhonePreview 
            :imageUrl="activeTemplate?.imageUrl || 'https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png'"
            :imageAlt="activeTemplate?.name || '智慧园区预览'"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// / 引用公共的导航栏组件
import PublicNavBar from "@/components/public/NavBar";
export default {
  name: "templateIndex",
  props: {
    // 接收模板数据数组
    templates: {
      type: Array,
      default: () => [],
    },
    // 接收当前激活的模板
    activeTemplate: {
      type: Object,
      default: null,
    },
    // 保留原有的datas属性以保持兼容性
    datas: {
      type: Object,
      default: null,
    },
  },
  inject: ["reload"],
  components: {
    PublicNavBar,
  },
  data() {
    return {
      activeIndex: 0,
      activeNavbarIndexLeft: 0,
      activeNavbarIndexRight: 0,
      horizontalWidthLeft: "63%",
      horizontalWidthRight: "63%",
      defaultTemplates: [
        {
          id: "1",
          name: "智慧园区",
          category: "工业制造",
          price: "¥299",
          imageUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
        },
        {
          id: "2",
          name: "智慧园区",
          category: "工业制造",
          price: "¥299",
          imageUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
        },
        {
          id: "3",
          name: "智慧园区",
          category: "工业制造",
          price: "¥299",
          imageUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
        },
        {
          id: "4",
          name: "智慧园区",
          category: "工业制造",
          price: "¥299",
          imageUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
        },
        {
          id: "5",
          name: "智慧园区",
          category: "工业制造",
          price: "¥299",
          imageUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
        },
        {
          id: "6",
          name: "智慧园区",
          category: "工业制造",
          price: "¥299",
          imageUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
        },
        {
          id: "7",
          name: "智慧园区",
          category: "工业制造",
          price: "¥299",
          imageUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
        },
      ],
      navbarListRight: [
        { label: "微官网", path: "" },
        { label: "PC端官网", path: "" },
      ],
      navbarListLeft: [
        { label: "模版中心", path: "" },
        { label: "我的模版", path: "" },
      ],
      templateData: {},
    };
  },

  mounted() {
    this.handleResponse();
  },

  methods: {
    // 顶部导航栏切换回调
    navbarClickRight(obj) {
      this.activeNavbarIndexRight = obj.index;
      this.horizontalWidthRight = obj.index == 0 ? "63%" : "73%";
      console.log("打印右侧顶部导航栏", obj);
    },
    navbarClickLeft(obj) {
      this.activeNavbarIndexLeft = obj.index;
      this.horizontalWidthLeft = obj.index == 0 ? "63%" : "73%";
      // 测试
      this.defaultTemplates=[]
      console.log("打印左侧顶部导航栏", obj);
    },
    // 处理响应
    handleResponse() {
      // 调用后台首页数据API
      this.$api.admin.home
        .getHomeDataAPI({
          appid: "fcadf3fd073944faa7cf189fd7c198e4",
          phonenumber: "15201611813",
        })
        .then((res) => {
          console.log("模版组件接收的数据--------------", res);
          // 实际项目中可以根据返回的数据更新templateData
          // this.templateData = res.data.data;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.slider-navbar {
  height: 100%;
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* 主容器 - 左右布局 */
.main-container {
  display: flex;
  width: 100%;
  height: 100%;
}
/* 左侧部分 - 模板列表 */
.left-section {
  width: 30%; /* 左侧宽度占30% */
  min-width: 380px; /* 确保两列布局有足够空间 */
  background-color: #fff;
}
.top-content{
  display: flex;
  justify-content: center;
  width: 60%;
  margin: 0 auto;
}
/* 右侧部分 - 大尺寸预览 */
.right-section {
  width: 70%; /* 右侧宽度占70% */
  min-width: 480px;
  display: flex;
  flex-direction: column;
}

/* 左侧模板网格 - 两列布局 */
.template-grid {
  padding: 10px 10px 10px 0;
  gap: 10px;
  // width: calc(100% - 30px); /* 两列布局，减去间距的一半 */
  height: calc(100vh - 62px); /* 高度占满视口 */
  overflow-y: auto; /* 内容过长时可以垂直滚动 */
  border-right: none; /* 去掉右侧边框 */
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  // height: 100%;
  // display: flex;
  // flex-wrap: wrap;
  // gap: 16px;
}
/************************* * 隐藏Webkit浏览器的滚动条 **********************/
.template-grid::-webkit-scrollbar {
  display: none;
}
/************************* * 隐藏Webkit浏览器的滚动条 **********************/

/* 左侧模板卡片 - 两列布局 */
.template-card {
  position: relative;
  border-radius: 8px;
  transition: all 0.3s ease;
  // width: calc(50% - 20px); /* 两列布局，减去间距的一半 */
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  margin-left: 10px;
}
.template-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.template-preview {
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  background-color: #d6e8fe;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  // height: 90px;
}

.template-image {
  width: auto;
  display: block;
  max-height: 129px;
  object-fit: contain;
  transition: all 0.3s ease;
  z-index: 1;
  position: relative;
}

/* 背景遮罩 - 默认隐藏 */
.template-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  border-radius: 4px;
}
.template-actions-status {
  position: absolute;
  top: 5px;
  right: 5px;
  background: linear-gradient(
    296deg,
    #eeb465 1%,
    #fadab8 50%,
    #e7b58d 100%
  ) !important;
  box-sizing: border-box;
  border: 1px solid #dfab74 !important;
  box-shadow: inset 0px 4px 10px 0px #fbe7cd !important;
  cursor: pointer;
  border-radius: 5px;
  font-size: 11px;
  padding: 2px 3px;
  font-weight: bold;
  font-variation-settings: "opsz" auto;
  font-feature-settings: "kern" on;
  color: #6e4430;
}
/* 操作按钮容器 - 默认隐藏 */
.template-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 80%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

/* 鼠标悬停时显示遮罩和按钮 */
.template-card:hover .template-overlay,
.template-card:hover .template-actions {
  opacity: 1;
  border-radius: 4px;
}

/* 按钮样式 */
.action-btn {
  width: 80px;
  padding: 6px 0;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  /* 纯白 */
  border: 1px solid #ffffff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  margin: 0 auto;
}

.action-btn:hover {
  background-color: transparent !important;
  transform: scale(1.02);
}

.default-btn {
  background-color: transparent !important;
  color: #fff !important;
}

.restore-btn {
  background-color: transparent !important;
  color: #fff !important;
}

.template-info {
  padding: 10px;
  border-left: 1px solid 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid 1px solid rgba(0, 0, 0, 0.2);
}

.template-name {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px 0;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-category {
  display: inline-block;
  background-color: #ff8b2d;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  margin-right: 4px;
}

.template-price {
  font-size: 18px;
  /* 主色 */
  color: #348cf8;
  /* 299 */
  font-family: Source Han Sans;
  font-weight: 400;
  font-variation-settings: "opsz" auto;
  font-weight: 500;
}

/* 右侧预览区域样式 */
.preview-tabs {
  width: 30%;
  margin-bottom: 20px;
}

.preview-tab {
  padding: 8px 16px;
  cursor: pointer;
  color: #606266;
  font-size: 14px;
  transition: all 0.3s ease;
  border: 1px solid #dcdfe6;
  background-color: white;
}

.preview-tab:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.preview-tab:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
}

.preview-tab.active {
  color: white;
  background-color: #1890ff;
  border-color: #1890ff;
}

.preview-container {
  flex: 1;
  align-items: center;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 40px;
  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.phone-preview {
  position: relative;
}

.phone-image {
  max-height: 600px;
  width: auto;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
</style>
